<template>
	<view class="swiperWrap" :style="{height:Height+'px'}">
		<view class="swiperTab">
			<!-- id为自己定义从下标0开始 name状态名称 -->
			<view class="tab_item" :class="[currentTab==item.id?'borderWidth':'']" @click="switchClick(item)" v-for="(item,index) in tabArray" :key="index">
				{{item.name}}
			</view>
		</view>
		<swiper duration="300" :class="[skeletonLoading?'scroll_wrap':'']" :current="currentTab" @change='swiperChange' :style="{'height':Height-36+'px'}">
			<swiper-item v-for="(item,index) in tabArray" :key="index">
				<scroll-view class="my_scroll"
				refresher-enabled="true"
				@refresherrefresh="onRefresh"
				@scrolltolower="scrolltolower"
				refresher-background="#efefef"
				refresher-default-style="none"
				scroll-y="true"
				:refresher-triggered="triggered">
					<!-- 下拉刷新提示 -->
					<template #refresher>
						<view class="loading pullLoading">
							<u-loading-icon text="加载中"></u-loading-icon>
						</view>
					</template>
					<u-skeleton rows="5" title :loading="skeletonLoading">
						<template v-if="item.content.length>0">
							<!-- 内容插槽 contentSwiperList传递参数 -->
							<slot name="TabSwiperList" :contentSwiperList="item.content"></slot>
							<!-- 暂无更多内容！ -->
							<view class="NoMoreContent">已经没有更多数据啦~</view>
						</template>
					</u-skeleton>
					<!-- 空数据 -->
					<view class="emptyData" v-if="item.ifemptyData">
						<u-empty iconSize="100" textSize="16" mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></u-empty>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name:"my-swiper-list",
		props:{
			tabArray:{
				type:Array,
				require:true,
			},
			requestUrl:{//请求路径
				type:String,
				require:true
			},
			requestType:{//请求方式
				type:String,
				default:'get'
			},
			requestParam:{//请求参数 
				type:Object,
				default(){
					return {}
				}
			},
			typeName:{//swiper切换状态时的参数名  -- 有swiper标签时
				type:String,
				default:'status',
			},
		},
		data() {
			return {
				timerSwiper:null,
				currentTab:0,
				Height:0,//高度
				triggered:true,//是否处于下拉刷新状态 true-是 false-否
				swiperlList:[],//数据
				ListPaging:{
					total:0,//数据总数
					// pageNum:1,//页数
					// pageSize:10,//条数
					isloading: false,//节流
				},
				// ifemptyData:false,//空数据图标是否显示 --默认不显示
				skeletonLoading:true,//骨架组件是否隐藏  --默认显示
			};
		},
		mounted(){
			this.getInfo()//设置高度
		},
		methods:{
			NewSetTabArray(array){
				array.forEach(function(item){
					item.total=0
					item.pageNum=1
					item.pageSize=10
					item.ifemptyData=false//空数据图标是否显示 --默认不显示
				})
				return array
			},
			getInfo(){//获取设备信息 --设置高度
				let info=uni.getSystemInfoSync()
				this.Height=info.windowHeight
			},
			switchClick(item){//点击切换
				this.currentTab=item.id
			},
			swiperChange(e){//滑动切换
				this.currentTab=e.detail.current
			},
			ResetData(){//重置数据
				this.tabArray[this.currentTab].pageNum=1
				this.tabArray[this.currentTab].total=0
				this.tabArray[this.currentTab].content=[]
				this.tabArray[this.currentTab].ifemptyData=false //防止搜索时返回的总条数为0，再次搜索时  ifemptyData还是为true导致空内容依然显示问题
			},
			onRefresh(){//下拉刷新
				this.triggered = true
				clearTimeout(this.timerSwiper)
				this.timerSwiper=setTimeout(()=>{
				   this.getListData(true,true) // 下拉刷新触发的事件
				},500)
			},
			scrolltolower(){//上拉触底
				let num=this.tabArray[this.currentTab].pageSize*this.tabArray[this.currentTab].pageNum
				if(num>=this.tabArray[this.currentTab].total){
					// 证明没有下一页数据了
					return uni.$u.toast('数据加载完成！')
				}
				// 判断是否正在加载其他数据
			    if (this.ListPaging.isloading) return
			    // 页码值+1
				this.tabArray[this.currentTab].pageNum+=1
				this.getListData()//获取下一页数据
			},
			async getListData(Refresh=false,ifSearch=false,requestChildParam={},routeUrl,startTabArray=[],start=false){
				if(ifSearch){//判断是否是搜索，是的话就清空之前的数据，再次请求  保存数据刷新时  亦可是单纯用来清空数据
					this.ResetData()
				}
				this.ListPaging.isloading=true
				//主要是页面的onshow生命周期 this.tabArray为空 所以要传路径
				if(start){
					this.tabArray=this.tabArray.length>0?this.NewSetTabArray(this.tabArray):this.NewSetTabArray(startTabArray)
				}
				let params={
					pageSize:this.tabArray[this.currentTab].pageSize,
					pageNum:this.tabArray[this.currentTab].pageNum,
				}
				if(this.tabArray[this.currentTab].name!='全部'){
					params[this.typeName]=this.tabArray[this.currentTab][this.typeName]
				}
				let mergeParam=''
				if(this.requestType=='get'){
					mergeParam={params:{...params,...this.requestParam,...requestChildParam}}
				}else{
					mergeParam={...params,...this.requestParam,...requestChildParam}
				}
				//主要是页面的onshow生命周期 this.requestUrl为空 所以要传路径
				this.requestUrl=this.requestUrl?this.requestUrl:routeUrl
				const res=await uni.$u.http[this.requestType](this.requestUrl, mergeParam)
				if(res.code==0){
					if(res.total==0) this.tabArray[this.currentTab].ifemptyData=true//长度为0 空内容组件显示
					this.tabArray[this.currentTab].content=[...this.tabArray[this.currentTab].content,...res.rows]
					this.tabArray[this.currentTab].total=res.total//总条数
					this.skeletonLoading=false //骨架组件隐藏
					this.ListPaging.isloading=false
					if(Refresh) this.triggered = false
				}
			},
			
		},
		watch:{
			currentTab(newVal,oldVal){//监听 currentTab变化时触发 
				if(typeof(newVal)=='number'&&this.tabArray[this.currentTab].content.length==0){
					this.getListData()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.swiperWrap{
	.swiperTab{
		width:100%;
		background:#fff;
		display:flex;
		align-items: center;
		justify-content: space-around;
		border-bottom:2px solid #ccc;
		// position: fixed;
		height:36px;
		// left:0;
		// top:0;
		z-index: 9999;
		width:100%;
		box-sizing: border-box;
		// tab
		.tab_item{
			height:100%;
			min-width:100rpx;
			border-bottom:2px solid transparent;
			display:flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			&.borderWidth{
				border-bottom-color:#6380e3;
			}
		}
	}
	.scroll_wrap{
		background:#fff;
	}
	.my_scroll{
		height:100%;
		white-space: nowrap;
		 /* loading */
		.loading {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80upx;
			overflow: hidden;
			width: 100%;
			&.pullLoading{
				/* 这里是关键 */
				margin-top: -80upx;
			}
		}
		 /* 暂无更多内容 */
		.NoMoreContent{
			font-size:14px;
			color:#cdcdcd;
			text-align: center;
			padding-bottom:15rpx;
		}
		.emptyData{//空数据
			height:100%;
			display:flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>